<template>
	<view class="container">
		<view class="tj-card">
			<view class="iconfont icon-cz-zc" style="color: #b51835;font-size: 1.5rem;">
				<text style="color: #000000;margin-left: 0.5rem;">支出：</text>
				<text style="color: #000000;margin-left: 0.5rem;">550元</text>
			</view>
			
			<view class="iconfont icon-income-o" style="color: #00aa7f;font-size: 1.5rem;">
				<text style="color: #000000;margin-left: 0.5rem;">收入：</text>
				<text style="color: #000000;margin-left: 0.5rem;">550元</text>
			</view>
		</view>
		
		<uni-list :border="true" style="margin-top: 50px;">
			<template v-for="item in arr">
				<uni-list-item style="margin: 5px 0;" :note="item.cont"  :showExtraIcon="true" :rightText="item.number"></uni-list-item>
			</template>
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:[]
			}
		},
		methods: {

		},
		mounted() {
			for (var i = 0; i < 5; i++) {
				let obj={}
				obj.cont="日长购物"+i;
				obj.number=10+Math.floor(Math.random()*10)+""
				this.arr.push(obj)
			}
		}
	}
</script>

<style>
	.tj-card {
		/* width: 100%; */
		height: 30vh;
		line-height: 13vh;
		background-color: #88b399;
		padding: 5px 10px;
		box-shadow: 0 0 2px 2px #ffffff;
		border-radius: 5px;
	}

	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>
